<template>
  <div class="my-login">
    <v-overlay color="#2d3a4b" opacity="1" z-index="999">
      <v-alert transition="scale-transition" style="position: fixed; top: 5%; min-width: calc(260px + 14vw)" :type="alert.type" elevation="4" v-model="alert.flag">{{alert.content}}</v-alert>

      <div style="background-color: #2d3a4b; min-width: calc(260px + 14vw)">
        <div class="text-h6 text-sm-h5 text-md-h4 font-weight-black text-center mb-4">登录</div>

        <v-text-field height="52" autofocus v-model="account" hint="请输入账号，账号为6至16位" solo color="rgb(136, 154, 164)" background-color="rgb(40, 52, 67)" prepend-inner-icon="mdi-account" label="账号" :dense="isMobile"></v-text-field>
        <v-text-field height="52" v-model="password" hint="请输入密码，密码为6至16位" solo color="rgb(136, 154, 164)" background-color="rgb(40, 52, 67)" :type="showPassword? 'text' : 'password'" :append-icon="showPassword ? 'mdi-eye' : 'mdi-eye-off'" @click:append="showPassword = !showPassword" prepend-inner-icon="mdi-lock" label="密码" :dense="isMobile"></v-text-field>

        <div style="width: 100%">
          <v-btn @click="login" :loading="loading" color="blue" min-width="100%">登录</v-btn>
        </div>
      </div>

    </v-overlay>
  </div>
</template>

<script>
import Http from "../api/http";

export default {
  name: "Login",


  data: ()=>{
    return {
      account: '',
      password: '',
      showPassword: false,
      alert: {
        content: '',
        type: 'success',
        flag: false
      },
      loading: false
    }
  },


  props: {
    isMobile: Boolean
  },



  methods: {
    login(){
      // 1.参数验证
      this.loading = true;
      if(this.account == ""||this.password == ""){
        this.alert.flag = true;
        this.alert.type = 'error';
        this.alert.content = '未输入账号或密码';
        setTimeout(()=>{
          this.alert.flag = false;
        }, 1500)

        return ;
      }

      // 2.发送请求
      Http.post("/common/login", {
        "account": this.account,
        "password": this.password
      }).then(data=>{
        if(data.code == 1){
          let token = data.result;
          token.flag = true;
          this.$store.commit("updateToken", token);
          window.localStorage.setItem("token", JSON.stringify({time: token.time, account: token.account, token: token.token}));

          this.alert.flag = true;
          this.alert.type = 'success';
          this.alert.content = '登录成功，即将跳转到首页';
          setTimeout(()=>{
            this.alert.flag = false;
            this.$router.push("/home");
          }, 1000)
        }else {
          this.alert.flag = true;
          this.alert.type = 'error';
          this.alert.content = data.message;
          setTimeout(()=>{
            this.alert.flag = false;
          }, 1500)
        }
        this.loading = false;
      }).catch(fail=>{
        this.loading = false;
        this.alert.flag = true;
        this.alert.type = 'error';
        this.alert.content = '服务端发生错误';
        console.error(fail);
        setTimeout(()=>{
          this.alert.flag = false;
        }, 1500)
      })

    }
  },




  activated() {
    if(this.$store.state.error != ""){
      this.alert.flag = true;
      this.alert.type = 'error';
      this.alert.content = this.$store.state.error;
      this.$store.commit("updateError", "");
      setTimeout(()=>{
        this.alert.flag = false;
      }, 1500)
    }



    // 判断token是否存在
    let token = window.localStorage.getItem("token");
    if(token != undefined&&token != null){
      // 获取token
      let token = JSON.parse(window.localStorage.getItem("token"));
      if(token.time != undefined&&token.token != undefined&&token.account != undefined){
        // 判断是否超时
        let time = (new Date()).getTime()/1000;
        if(time > token.time){
          window.localStorage.removeItem("token");
          return ;
        }

        // 存入Vuex中并转入首页
        token.flag = true;
        this.$store.commit("updateToken", token);
        this.$router.push("/home");
      }
    }
  }
}
</script>

<style>
  .my-login .v-text-field.v-text-field--solo:not(.v-text-field--solo-flat) > .v-input__control > .v-input__slot {
    outline: 1px rgb(62, 73, 87) solid !important;
    box-shadow: none;
  }
</style>